<template>
  <div class="main">
    <!-- <baidu-map
      id="map"
      :center="center"
      :zoom="zoom"
      :map-style="mapStyle"
      :scroll-wheel-zoom="true"
      @ready="handler"
    /> -->
    <div class="title">
      <span class="logo" />
      {{ title }}
      <div class="time">
        <img src="../../../assets/robot/time.png">
        <span> {{ time }}</span>
      </div>
    </div>
    <baidu-map
      id="map"
      :scroll-wheel-zoom="true"
      @ready="handler"
    />

  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/extension/bmap/bmap')
// import '../china'
export default {
  name: 'MapTwo',
  components: {
  },
  props: {
    // 初始data
    data: {
      type: Array,
      default: function() {
        return [
          { 'code': 'code', 'title': '广州', 'x': '113.330245', 'y': '23.116879', 'attr': '', 'num': '10' },
          { 'code': 'code', 'title': 'name', 'x': '115.250806', 'y': '24.723739', 'attr': '', 'num': '4' },
          { 'code': 'code', 'title': 'name', 'x': '116.250806', 'y': '26.723739', 'attr': '', 'num': '3' },
          { 'code': 'code', 'title': 'name', 'x': '117.250806', 'y': '28.723739', 'attr': '', 'num': '6' },
          { 'code': 'code', 'title': 'name', 'x': '118.250806', 'y': '27.723739', 'attr': '', 'num': '3' },
          { 'code': 'code', 'title': 'name', 'x': '119.250806', 'y': '25.723739', 'attr': '', 'num': '1' },
          { 'code': 'code', 'title': 'name', 'x': '120.250806', 'y': '21.723739', 'attr': '', 'num': '2' }
        ]
      }
    },
    // 标题
    title: {
      type: String,
      default: '蓝色风格地图背景'
    },
    // 初始经度
    initlongitude: {
      type: String,
      default: '113.330245'
    },
    // 初始纬度
    initlatitude: {
      type: String,
      default: '23.116879'
    },
    // 初始缩放
    initZoom: {
      type: Number,
      default: 12
    },
    // 经度key
    longitudeField: {
      type: String,
      default: 'x'
    },
    // 纬度key
    latitudeField: {
      type: String,
      default: 'y'
    },
    // 名称 key
    nameField: {
      type: String,
      default: 'title'
    },
    // 点大小
    valueField: {
      type: String,
      default: 'num'
    }
  },
  data() {
    return {
      newData: [],
      time: null
    }
  },
  computed: {

  },
  watch: {
    data(val, oldvalue) {
      //
      this.getMapChart()
    },
    time(val, oldvalue) {
      // const time = new Date()
      this.time = val
    }
  },
  mounted() {
    // this.getMapChart()
    setInterval(() => {
      this.gettime()
    }, 1000)
  },
  methods: {
    handler({ BMap, map }) {
      // this.center.lng = this.initlongitudeField
      // this.center.lat = this.initlatitudeField
      // this.zoom = this.initZoom
      this.init()
      // this.getMapChart()
    },
    getMapChart() {
      const $this = this
      // 初始化echarts实例
      var myEcharts = echarts.init(document.getElementById('map'))
      // const data = [{ name: '广东', value: [125.03, 46.58] }]
      const option = {
        // backgroundColor: 'transparent',
        // title: {
        //   text: $this.title,
        //   // subtext: 'data from PM25.in',
        //   // sublink: 'http://www.pm25.in',
        //   left: 'center',
        //   textStyle: {
        //     color: '#fff',
        //     lineHeight: 50
        //   }
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{b}'

        },
        bmap: {
          center: [$this.initlongitude, $this.initlatitude],
          zoom: $this.initZoom,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: 'water',
                elementType: 'all',
                stylers: {
                  color: '#044161'
                }
              },
              {
                featureType: 'land',
                elementType: 'all',
                stylers: {
                  color: '#004981'
                }
              },
              {
                featureType: 'boundary',
                elementType: 'geometry',
                stylers: {
                  color: '#064f85'
                }
              },
              {
                featureType: 'railway',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'highway',
                elementType: 'geometry',
                stylers: {
                  color: '#004981'
                }
              },
              {
                featureType: 'highway',
                elementType: 'geometry.fill',
                stylers: {
                  color: '#005b96',
                  lightness: 1
                }
              },
              {
                featureType: 'highway',
                elementType: 'labels',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'arterial',
                elementType: 'geometry',
                stylers: {
                  color: '#004981'
                }
              },
              {
                featureType: 'arterial',
                elementType: 'geometry.fill',
                stylers: {
                  color: '#00508b'
                }
              },
              {
                featureType: 'poi',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'green',
                elementType: 'all',
                stylers: {
                  color: '#056197',
                  visibility: 'off'
                }
              },
              {
                featureType: 'subway',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'manmade',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'local',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'arterial',
                elementType: 'labels',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'boundary',
                elementType: 'geometry.fill',
                stylers: {
                  color: '#029fd4'
                }
              },
              {
                featureType: 'building',
                elementType: 'all',
                stylers: {
                  color: '#1a5787'
                }
              },
              {
                featureType: 'label',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              }
            ]
          }

        },
        series: [
          {
            name: '',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: $this.newData,
            symbolSize: function(val) { // 设置散点大小
              return val[2]
            },
            encode: {
              value: 2
            },
            // symbolSize: 10,
            // showEffectOn: 'emphasis',
            effectType: 'ripple',
            rippleEffect: {
              brushType: 'stroke',
              color: 'yellow'
            },

            // rippleEffect: {
            //   color: 'green',
            //   brushType: 'stroke'
            // },
            hoverAnimation: true,
            label: {
              // formatter: '{b}',
              position: 'right',
              show: true,
              formatter: '{b}'
            },
            // tooltip: {
            //   show: true,
            //   trigger: 'item'

            // },
            itemStyle: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
            },
            zlevel: 1
          }

        ]
      }
      myEcharts.clear()
      myEcharts.setOption(option)
    },
    init() {
      const $this = this
      // const data = []
      for (const i in $this.data) {
        $this.newData.push({
          name: $this.data[i][$this.nameField],
          value: [$this.data[i][$this.longitudeField], $this.data[i][$this.latitudeField], $this.data[i][$this.valueField]]

        })
      }
      // this.newData = data

      this.getMapChart()
    },
    gettime() {
      const time1 = new Date()
      this.time = time1.toLocaleDateString() + ' ' + time1.toLocaleTimeString()
    }

  }
}
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  // #china-map {
  //   height: 100%;
  // }
  .title{
    height: 50px;
    width: 100%;
    position: absolute;
    top:0;
    line-height: 50px;
    text-align: center;
    // background-color: red;
    z-index: 99;
    background-image: url('../../../assets/robot/title.png');
    background-size: 100% 100%;
    color: white;
    font-weight: 800;
    .logo{
      position: absolute;
      left: 0;
      height: 70%;
      top: 17%;
      width: 155px;
      // background-image: url('../../assets/robot/logo.png');
      background-image: url('../img/logo.png');
      background-size: 100% 100%;
    }
    .time{
      position: absolute;
      right: 15px;
      line-height: 50px;
      font-size: 13px;
      height: 50px;
      top: 0;
      img{
        vertical-align:middle;
        margin: 0 5px 0 0;
        padding: 0;
        width: 35px;
      }
      span{
        vertical-align:middle;

      }

    }
    .el-image{
      width: 100%;
      height: 100%;
      position: absolute;
      ::v-deep.el-image__inner{
        margin: 0!important;
      }
    }

  }
}

#map {
  width: 100%;
  height: 100%;
}

</style>

<style lang="scss">
.anchorBL {
  visibility: hidden;
}
</style>
